<#include "/include/macros.ftl">
<@header></@header>
<@breadcrumb>
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li class="active">友情链接管理</li>
    </ol>
</@breadcrumb>
<!-- Bootstrap -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../assets/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="../assets/css/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="../assets/css/green.css" rel="stylesheet">

<!-- bootstrap-progressbar -->
<link href="../assets/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="../assets/css/jqvmap.min.css" rel="stylesheet"/>
<!-- bootstrap-daterangepicker -->
<link href="../assets/css/daterangepicker.css" rel="stylesheet">

<!-- Custom Theme Style -->
<link href="../assets/css/custom.min.css" rel="stylesheet">
<style>
    *{
        cursor:default
    }
    .center_center{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bodys{
        border: 1px solid #ddd
    }
    .title{
        height:70px ;
        position: relative;
    }
    .title>span{
        font-size:20px ;
    }
    .title>button{
        position: absolute;
        top:20px ;
        right: 20px;
    }
    .desc{
        font-size: 18px;
        border-bottom: 1px solid #ddd;
    }
    .desc>span{
        margin-left:45px ;
    }
    .desc>span:first-of-type{
        margin-left: 0;
    }
    .addImg{
        height:100px;
        width: 200px;
        border:1px solid #ced4da;
        box-sizing: content-box;
        position: relative;
    }
    .addImg img{
        height:100px;
        width: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .coverImage{
        margin-top:10px
    }
    .softContent{
        width: 100%;
    }
    .softContent p{
        margin: 0;
        padding: 0;
        margin-bottom: 10px;
        width: 100%;
    }
    .softContent img{
        display: block;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .softContent p>img{
        margin: 0;
    }
    .product{
        min-height:60px ;
        align-items: center;
    }
    .product>img{
        height: 100px;
        width: 100px;
        object-fit: cover;
    }
    .product>div{
        flex-flow: column;
        justify-content: space-between;
        height: 100px;
        margin-left: 20px;
        width: 375px;
        margin-right: 20px;
    }
    .softNum{
        justify-content: flex-end;
        font-size: 15px;

    }
    .softNum>span{
        margin-left: 12px;
    }
    .softNum>i{
        font-size: 15px;
        margin-left: 12px;
    }
    .bodyz{
        border-bottom: 1px solid #ddd;
    }
    .compageS{
        margin-top: 10px;
    }
    .pagination a {
        text-decoration: none;
        border: 1px solid #AAE;
        color: #15B;
    }

    .pagination a, .pagination span {
        display: inline-block;
        padding: 0.1em 0.4em;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .pagination .current {
        background: #26B;
        color: #fff;
        border: 1px solid #AAE;
    }

    .pagination .current.prev, .pagination .current.next{
        color:#999;
        border-color:#999;
        background:#fff;
    }

    .allComment{
        display: flex;
        height: 130px;
        border-bottom: 1px solid #DDD;
        align-items: center;
        padding-left: 12%;
    }
    .allComment>img{
        height: 50px;
        width: 50px;
        border-radius: 50%;
    }
    .allComment>div{
        height: 100%;
        padding: 20px 0;
        margin-left: 20px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        position: relative;
    }
    .allComment>div>img{
        height:35px ;
        width: 90px;
        position: absolute;
        right: 0;
        top: 20px;
    }
    .allComment>div>div>span{
        margin-left: 20px;
        color:rgb(26, 188, 156) ;
        cursor:pointer;
    }
    .allComment>div>div>span:first-of-type{
        margin-left: 0;
        color:#73879C ;
        cursor:default
    }
    #Searchresult{
        min-height:390px ;
    }
    .allShuju{
        margin-right: 20px;
    }
    .allShuju>span{
        color: rgb(255, 0, 132);
    }
    .jampPage{
        margin-left: 20px;
    }
    .jampPage>input{
        height: 25px;
        width: 35px;
        margin: 0 10px ;
    }
</style>

<body class="nav-md">
<div class="container body">
    <div class="main_container">

        <!-- page content 中间的内容-->
        <div class="right_col" role="main">
            <div class="x_content" >
                <label class="col-form-label col-md-3 col-sm-3 label-align"></label>
                <div class="col-md-6 col-sm-6 bodys" >
                    <div class="item form-group center_center title " >
                        <span style="font-weight: bold;">日式简约风格装修效果图</span>
                        <!-- <span style="font-weight: bold;"></span> -->
                        <button  class="btn btn-success  back" >返回</button>
                    </div>
                    <div class="item form-group center_center desc " >
                        <span >场所：公寓</span>
                        <span>风格：日式</span>
                        <span>发布时间：2019-03-20  15：00</span>
                    </div>
                    <div class="item form-group coverImage" >
                        <label class="col-form-label col-md-2 col-sm-2 label-align" for="first-name">封面图片</label>
                        <div class="col-md-9 col-sm-9 " style="display: flex;align-items: center;">
                            <div class="addImg">
                                <img src="../assets/img/cropper.jpg" alt="">
                                <img src="" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="item form-group bodyz" >
                        <label class="col-form-label col-md-2 col-sm-2 label-align" for="first-name">内容正文</label>
                        <div class="col-md-9 col-sm-9 " >
                            <!-- <div class="form-group softContent">
                                <p><img src="https://oss.wljiam.com/file/Temple/202003181657271tmpf7ba408fdee146409ad43b4856da75e7.png"><br></p><p>啊哦i都结束了发就撒赖科技分厘卡电视机离开房间两款手机<br></p><p>数据分类是看见分厘卡是尽快立法；；‘</p><p>；是；弗兰克是</p><p>数据弗兰克是离开房间可拉斯基开发了数据库里JFK了森林砍伐即使考虑到JFK了 里科夫斯基开了房间上课路径弗兰克是就来扩大飞机是立刻搭街坊拉开圣诞节来付款时间独立开发介绍了开发将来肯定是解放立刻就森林砍伐的介绍了开发就开始了的里发生口角</p>
                            </div>
                            <div class="item form-group center_center  " >
                                <span style="font-weight: bold;">展示产品（2）</span>
                            </div>
                            <div class="form-group item product">
                               <img src="img/cropper.jpg" alt="">
                               <div class="item">
                                   <span>1植护竹浆本色抽纸3层100抽6包面纸餐巾卫生纸巾批发家用实惠装</span>
                                   <span style="color: #C84739;font-weight: bold;">¥8.00</span>
                                </div>
                            </div>
                            <div class="form-group item product">
                                <img src="img/cropper.jpg" alt="">
                                <div class="item">
                                    <span>1植护竹浆本色抽纸3层100抽6包面纸餐巾卫生纸巾批发家用实惠装</span>
                                    <span style="color: #C84739;font-weight: bold;">¥8.00</span>
                                 </div>
                             </div>
                            <div class=" form-group softContent">
                                <img src="https://oss.wljiam.com/file/Temple/202003181658011tmpc6f03d404ff34733bb255db6ef54ab16.png"><p>破解福建省离开房间老师加快了开发</p><p>是计法角度上来看解放立刻是尽量克服</p><p>是回复可见好的声卡就和付款时间河口附近还是</p><p>开始就付结果是单号发给事件回顾就符合公司结合官方就是</p><p>是九分裤是回复可见</p>
                            </div>
                            <div class="item form-group center_center  " >
                                <span style="font-weight: bold;">展示产品（2）</span>
                            </div>
                            <div class="form-group item product">
                                <img src="img/cropper.jpg" alt="">
                                <div class="item">
                                    <span>1植护竹浆本色抽纸3层100抽6包面纸餐巾卫生纸巾批发家用实惠装</span>
                                    <span style="color: #C84739;font-weight: bold;">¥8.00</span>
                                 </div>
                             </div>
                             <div class="form-group item product">
                                 <img src="img/cropper.jpg" alt="">
                                 <div class="item">
                                     <span>1植护竹浆本色抽纸3层100抽6包面纸餐巾卫生纸巾批发家用实惠装</span>
                                     <span style="color: #C84739;font-weight: bold;">¥8.00</span>
                                  </div>
                              </div> -->
                            <!-- <div class="form-group item softNum">
                                <i class="fa fa-thumbs-o-up fa-hover"></i>
                                <span>点赞</span>
                                <span>1000</span>
                                <i class="fa fa-share-alt fa-hover"></i>
                                <span>分享</span>
                                <span>1000</span>
                                <i class="fa fa-star"></i>
                                <span>收藏</span>
                                <span>1000</span>
                            </div> -->
                        </div>
                    </div>
                    <div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>
                    <div class="item form-group center_center compageS">
                        <!-- <div class="allShuju">共<span>10</span>页/<span>100</span>条数据</div> -->
                        <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                        <!-- <div class="jampPage">跳至<input type="number" min=1  >页</div> -->
                    </div>
                    <div id="hiddenresult" style="display:none;">
                        <!-- 列表元素 -->
                    </div>
                </div>
            </div>
        </div>
        <!-- /page content中间的内容 -->

        <!-- footer content -->
        <footer>
            <div class="pull-right">
                Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
            </div>
            <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->

    </div>
</div>
<!-- jQuery -->
<script src="../assets/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->
<script src="../assets/js/fastclick.js"></script>
<!-- NProgress -->
<script src="../assets/js/nprogress.js"></script>
<!-- Chart.js -->
<script src="../assets/js/Chart.min.js"></script>
<!-- gauge.js -->
<script src="../assets/js/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="../assets/js/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="../assets/js/icheck.min.js"></script>
<!-- jQuery Tags Input -->
<script src="../assets/js/jquery.tagsinput.js"></script>
<!-- bootstrap-wysiwyg -->
<script src="../assets/js/bootstrap-wysiwyg.js"></script>
<script src="../assets/js/jquery.hotkeys.js"></script>
<script src="../assets/js/prettify.js"></script>
<!-- Skycons -->
<script src="../assets/js/skycons.js"></script>
<!-- Flot -->
<script src="../assets/js/jquery.flot.js"></script>
<script src="../assets/js/jquery.flot.pie.js"></script>
<script src="../assets/js/jquery.flot.time.js"></script>
<script src="../assets/js/jquery.flot.stack.js"></script>
<script src="../assets/js/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="../assets/js/jquery.flot.orderBars.js"></script>
<script src="../assets/js/jquery.flot.spline.min.js"></script>
<script src="../assets/js/curvedLines.js"></script>
<!-- DateJS -->
<script src="../assets/js/date.js"></script>
<!-- JQVMap -->
<script src="../assets/js/jquery.vmap.js"></script>
<script src="../assets/js/jquery.vmap.world.js"></script>
<script src="../assets/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="../assets/js/moment.min.js"></script>
<script src="../assets/js/daterangepicker.js"></script>
<!-- Custom Theme Scripts -->
<script src="../assets/js/custom.min.js"></script>
<!-- Dropzone.js -->
<script src="../assets/js/dropzone.min.js"></script>
<!-- 分页 -->
<script src="../assets/js/pagination.js"></script>
<!-- 地址 -->
<script src="../assets/js/address.js"></script>
<script>
    var id= "${item}";
    var userId= "${userId}";
    console.log(id);
    let message={};
    $(document).ready(function(){
        //获取信息
        let formData = new FormData();
        formData.append('softId',id);
        $.ajax({
            url: 'http://localhost:8086/backstageSoft/specific',
            type: "post",
            data: formData,
            processData: false,
            contentType: false,
            success: function(res){
                if(res.code === 0){
                    message=res.data;
                    console.log(res.data);
                    $('.title>span')[0].innerText=message.specific.softTitle;
                    $(".desc>span:first-of-type")[0].innerText='场所：'+message.specific.softPlace;
                    $(".desc>span:nth-of-type(2)")[0].innerText='风格：'+message.specific.softStyle;
                    $(".desc>span:nth-of-type(3)")[0].innerText='发布时间：'+message.specific.addTime;
                    $(".addImg>img")[0].src=message.specific.coverImage;
                    let plist=message.list;
                    for(let a=0;a<plist.length;a++){
                        let html='<div class="form-group softContent">'+plist[a].content+'</div><div class="item form-group center_center"><span style="font-weight: bold;">展示产品（'+plist[a].product.length+'）</span></div>'
                        $(".bodyz>div").append(html);
                        for(let b=0;b<plist[a].product.length;b++){
                            let html1='<div class="form-group item product"><img src="'+plist[a].product[b].shopImage+'" alt=""><div class="item"><span>'+plist[a].product[b].shopContent+'</span><span style="color: #C84739;font-weight: bold;">¥'+plist[a].product[b].shopPrice.toFixed(2)+'</span></div></div>'
                            $(".bodyz>div").append(html1)
                        }
                    }
                    let html2='<div class="form-group item softNum"><i class="fa fa-thumbs-o-up fa-hover"></i><span>点赞</span><span>'+message.specific.zanNumber+'</span><i class="fa fa-share-alt fa-hover"></i><span>分享</span><span>'+message.specific.collectionNumber+'</span><i class="fa fa-star"></i><span>收藏</span><span>'+(message.specific.shareNum?message.specific.shareNum:0)+'</span></div>'
                    $(".bodyz>div").append(html2)
                }
            }
        });
        //获取评论信息
        let formData1 = new FormData()
        formData1.append('answerId',id)
        $.ajax({
            url: 'http://localhost:8086/backstageSoft/allComment',
            type: "post",
            data: formData1,
            processData: false,
            contentType: false,
            success: function(res){
                if(res.code == 0){
                    console.log(res.data)
                    let list=res.data.comment?res.data.comment:[]
                    let n=Math.ceil(list.length/3)
                    let end=Math.floor(list.length/3)
                    for(let a=0;a<n;a++){
                        let div=document.createElement("div")
                        div.className='result'
                        let nList
                        if((a+1)<=end){
                            nList=3
                        }else{
                            nList=list.length%3
                        }
                        for(let b=0;b<nList;b++){
                            let div1=document.createElement("div")
                            div1.className='allComment'
                            if(list[(3*a+b)].useState==0){
                                div1.innerHTML='<img src="'+list[(3*a+b)].userImage+'" alt=""><div><span>'+list[(3*a+b)].userName+'</span><span>'+list[(3*a+b)].content+'</span><div><span>'+list[(3*a+b)].addTime+'</span><span data-useid='+list[(3*a+b)].userId+' data-id='+list[(3*a+b)].commentId+'>隐藏</span><span data-useid='+list[(3*a+b)].userId+' data-id='+list[(3*a+b)].commentId+'>删除</span></div></div>'
                            }else{
                                div1.innerHTML='<img src="'+list[(3*a+b)].userImage+'" alt=""><div><img src="../assets/img/yincang.png" alt=""><span>'+list[(3*a+b)].userName+'</span><span>'+list[(3*a+b)].content+'</span><div><span>'+list[(3*a+b)].addTime+'</span><span data-useid='+list[(3*a+b)].userId+' data-id='+list[(3*a+b)].commentId+'>不隐藏</span><span data-useid='+list[(3*a+b)].userId+' data-id='+list[(3*a+b)].commentId+'>删除</span></div></div>'
                            }
                            div.append(div1)
                        }
                        $("#hiddenresult").append(div);
                        //点击隐藏
                        $('.allComment>div>div>span:nth-of-type(2)').unbind('click').bind('click',function(e){
                            console.log(e.currentTarget.dataset.id);
                            console.log(e.currentTarget.dataset.useid);
                            console.log($(this)[0].innerText);
                            let formData1 = new FormData();
                            formData1.append('id',id);
                            formData1.append('commentId',e.currentTarget.dataset.id);
                            formData1.append('content',$(this)[0].innerText);
                            formData1.append('userId',e.currentTarget.dataset.useid);
                            $.ajax({
                                url: 'http://localhost:8085/backstageSoft/hide',
                                type: "post",
                                data: formData1,
                                processData: false,
                                contentType: false,
                                success: function(res){
                                    console.log("success")
                                }
                            });
                            let list=$(".current"),index
                            for(let a=0;a<list.length;a++){
                                if(list[a].innerText!='上一页'&&list[a].innerText!='下一页'){
                                    index=Number(list[a].innerText)-1
                                    break
                                }
                            }
                            if($(this).parent().parent().children("img").length>=1){
                                $(this).parent().parent().children("img").remove()
                                $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")>div").children("img").remove()
                                $(this)[0].innerText='隐藏'
                                $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")>div>div>span:nth-of-type(2)")[0].innerText='隐藏'

                            }else{
                                $(this).parent().parent().append('<img src="../assets/img/yincang.png" alt="">')
                                $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")>div").append('<img src="../assets/img/yincang.png" alt="">')
                                $(this)[0].innerText='不隐藏'
                                $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")>div>div>span:nth-of-type(2)")[0].innerText='不隐藏'
                            }

                        })
                        //点击删除
                        $('.allComment>div>div>span:nth-of-type(3)').unbind('click').bind('click',function(e){
                            console.log(e.currentTarget.dataset.id)
                            console.log(e.currentTarget.dataset.userid);
                            console.log('点击删除')
                            let formData2= new FormData();
                            formData2.append('id',id);
                            formData2.append('commentId',e.currentTarget.dataset.id);
                            formData2.append('userId',e.currentTarget.dataset.useid);
                            $.ajax({
                                url: 'http://localhost:8086/backstageSoft/deleteComment',
                                type: "post",
                                data: formData2,
                                processData: false,
                                contentType: false,
                                success: function(res){
                                    console.log("success")
                                }
                            });
                            let list=$(".current"),index
                            for(let a=0;a<list.length;a++){
                                if(list[a].innerText!='上一页'&&list[a].innerText!='下一页'){
                                    index=Number(list[a].innerText)-1
                                    break
                                }
                            }
                            $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")").remove()
                            $(this).parent().parent().parent().remove()
                        })
                        var initPagination = function() {
                            var num_entries = $("#hiddenresult div.result").length;
                            // 创建分页
                            $("#Pagination").pagination(num_entries, {
                                num_edge_entries: 1, //边缘页数
                                num_display_entries: 4, //主体页数
                                callback: pageselectCallback,
                                items_per_page:1 ,//每页显示1项
                                prev_text:'上一页',
                                next_text:'下一页'
                            });
                        }();

                        function pageselectCallback(page_index, jq){
                            var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone(true);
                            $("#Searchresult").empty().append(new_content); //装载对应分页的内容
                            return false;
                        }
                    }
                }
            }})
        //点击返回
        $('.title>.back').click(function(e){
            history.go(-1)
            console.log('点击返回')
        })


    })
</script>
</body>
